<div class="nav-container" [class.example-is-mobile]="mobileQuery.matches">
    <mat-toolbar color="primary" class="example-toolbar" style="justify-content: space-between; padding: 0px;"
        [style.height.px]="56">
        <div style="display: flex;align-items: center;">
            <button mat-icon-button (click)="snav.toggle();" style="margin-top: -2px;">
                <mat-icon>{{snav.opened?'menu_open':'menu'}}</mat-icon>
            </button>
            <div style="border-left: 1px solid white; margin: 0px 16px 0px 8px; height: 24px;">&nbsp;</div>
            <div *ngIf="projectSvc.viewProject" [formGroup]="switchProjectForm" class="project-switch">
                <!-- switch project select -->
                <mat-form-field>
                    <mat-select formControlName="viewTenantId">
                        <mat-option *ngFor="let e of totalProjectsOptions" [value]="e.value">
                            {{e.label}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>
        <div style="display: flex; align-items: center;" *ngIf="mobileQuery.matches">
            <button mat-button class="avatar-wrapper" [matMenuTriggerFor]="userMenu" (click)="userMsgSvc.clone()">
                <mat-icon matBadge="{{bellCount(userMsgSvc.latestMessage)}}" matBadgeOverlap="false"
                    matBadgeSize="small" matBadgeColor="accent">notifications_none
                </mat-icon>
            </button>
            <button *ngIf="hasAuth()" class="avatar-wrapper" mat-button [matMenuTriggerFor]="mgmtMenu"
                (click)="msgSvc.clone()">
                <mat-icon matBadge="{{bellCount(msgSvc.latestMessage)}}" matBadgeOverlap="false" matBadgeSize="small"
                    matBadgeColor="warn">notifications_none
                </mat-icon>
            </button>
            <button mat-icon-button [matMenuTriggerFor]="account">
                <mat-icon>more_vert</mat-icon>
            </button>
        </div>
        <div style="display: flex; align-items: center;" *ngIf="!mobileQuery.matches">
            <button mat-button class="avatar-wrapper" [matMenuTriggerFor]="userMenu" (click)="userMsgSvc.clone()">
                <mat-icon matBadge="{{bellCount(userMsgSvc.latestMessage)}}" matBadgeOverlap="false"
                    matBadgeSize="small" matBadgeColor="accent">notifications_none
                </mat-icon>
            </button>
            <button *ngIf="hasAuth()" class="avatar-wrapper" style="margin-left: 20px;" mat-button
                [matMenuTriggerFor]="mgmtMenu" (click)="msgSvc.clone()">
                <mat-icon matBadge="{{bellCount(msgSvc.latestMessage)}}" matBadgeOverlap="false" matBadgeSize="small"
                    matBadgeColor="warn">notifications_none
                </mat-icon>
            </button>
            <button mat-button class="avatar-wrapper" style="margin-left: 20px;" [matMenuTriggerFor]="account">
                <img *ngIf="avatar" mat-card-avatar [src]="avatar"
                    style="height: 24px; width: 24px; border-radius: 50%;" />
                <div *ngIf="!avatar"
                    style="height: 24px; width: 24px; border-radius: 50%; background-color: white; color: #673ab7; line-height: 24px;">
                    {{firstLetter(name)}}</div>
            </button>
        </div>
    </mat-toolbar>
    <mat-menu #mgmtMenu="matMenu">
        <button mat-menu-item [routerLink]="'mgmt/notification/bell'">
            <mat-icon fontSet="material-icons-outlined">notifications_none</mat-icon>
            <span> {{'MESSAGE_DASHBOARD'|translate}}</span>
        </button>
        <mat-divider></mat-divider>
        <ng-container *ngIf="msgSvc.latestMessage.length===0">
            <div style="height: 48px; text-align: center; line-height: 48px;">{{'NO_MSG'|translate}}</div>
        </ng-container>
        <ng-container *ngIf="msgSvc.latestMessage.length!==0">
            <ng-container *ngFor="let el of filterDuplicate(msgSvc.latestMessage); let i = index">
                <app-card-notification [value]="el" [length]="msgSvc.latestMessage.length" [index]="i"
                    (onAck)="msgSvc.dismiss($event)"></app-card-notification>
            </ng-container>
        </ng-container>
    </mat-menu>
    <mat-menu #userMenu="matMenu">
        <button mat-menu-item [routerLink]="'user/notification/bell'">
            <mat-icon fontSet="material-icons-outlined">notifications_none</mat-icon>
            <span> {{'USER_MESSAGE'|translate}}</span>
        </button>
        <mat-divider></mat-divider>
        <ng-container *ngIf="userMsgSvc.latestMessage.length===0">
            <div style="height: 48px; text-align: center; line-height: 48px;">{{'NO_MSG'|translate}}</div>
        </ng-container>
        <ng-container *ngIf="userMsgSvc.latestMessage.length!==0">
            <ng-container *ngFor="let el of filterDuplicate(userMsgSvc.latestMessage); let i = index">
                <app-card-notification [value]="el" [length]="userMsgSvc.latestMessage.length" [index]="i"
                    (onAck)="userMsgSvc.dismiss($event)"></app-card-notification>
            </ng-container>
        </ng-container>
    </mat-menu>
    <mat-menu #account="matMenu">
        <div style="margin: 8px 16px;">
            <div style="display: flex;justify-content: space-evenly;">
                <div style="height: 36px; width: 36px; display: flex; justify-content: center; align-items: center;">
                    <img *ngIf="avatar" mat-card-avatar [src]="avatar"
                        style="height: 24px; width: 24px; border-radius: 50%;" />
                    <div *ngIf="!avatar"
                        style="height: 24px; width: 24px; border-radius: 50%; background-color: white; color: #673ab7; line-height: 24px; border: 1px solid #673ab7; text-align: center;">
                        {{firstLetter(name)}}</div>
                </div>
                <div style="font-size: 14px; color: #673ab7; line-height: 36px; font-weight: 700;">{{name}}</div>
            </div>
            <div>
                <button mat-menu-item [routerLink]="'user/profile'"
                    style="display: flex; align-items: center; flex-direction: row; padding-left: 6px;">
                    <mat-icon fontSet="material-icons-outlined" style="margin-right: 4px;">account_circle</mat-icon>
                    <span> {{'MY_PROFILE'|translate}}</span>
                </button>
                <button mat-menu-item [routerLink]="'user/setting'"
                    style="display: flex; align-items: center; flex-direction: row; padding-left: 6px;">
                    <mat-icon fontSet="material-icons-outlined" style="margin-right: 4px;">settings</mat-icon>
                    <span> {{'SYSTEM_SETTINGS'|translate}}</span>
                </button>
                <button mat-menu-item (click)="doLogout()"
                    style="display: flex; align-items: center; flex-direction: row; padding-left: 6px;">
                    <mat-icon fontSet="material-icons-outlined" style="margin-right: 4px;">exit_to_app</mat-icon>
                    <span> {{'LOGOUT'|translate}}</span>
                </button>
            </div>
        </div>
    </mat-menu>
    <mat-sidenav-container class="example-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
        <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches"
            [opened]="navSideBar()" (opened)="openedSideBar()" (closed)="closedSideBar()" [fixedTopGap]="56"
            style="width: 256px;">
            <!-- start of admin panel -->
            <mat-expansion-panel (opened)="openedHandler('admin_nav')" (closed)="closedHander('admin_nav')"
                *ngIf="hasAuth()" [expanded]="navExpand('admin_nav')">
                <mat-expansion-panel-header style="padding-left: 16px;">
                    <mat-panel-title style="font-weight: 600;">
                        {{'AUTH_CENTER'| translate}}
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-nav-list style="padding-top: 0px;">
                    <mat-list-item mat-list-item [routerLink]="nav.link" routerLinkActive="nav-active"
                        [preserveFragment]="true" style="font-size: 14px;" [queryParams]="preserveURLQueryParams(nav)"
                        *ngFor="let nav of menuMgmt">
                        <mat-icon fontSet="material-icons-outlined" style="padding-right:8px;">{{nav.icon}}</mat-icon>
                        {{nav.display| translate}}
                    </mat-list-item>
                </mat-nav-list>
            </mat-expansion-panel>
            <!-- end of admin panel -->
            <!-- start of shared api -->
            <mat-expansion-panel *ngIf="hasTenants()" (opened)="openedHandler('api_nav')"
                (closed)="closedHander('api_nav')" [expanded]="navExpand('api_nav')">
                <mat-expansion-panel-header style="padding-left: 16px;">
                    <mat-panel-title style="align-items: center;">
                        <mat-icon fontSet="material-icons-outlined">code</mat-icon>
                        <div style="margin-left: 8px;">{{'ENDPOINT_CENTER'| translate}}</div>
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-nav-list style="padding-top: 0px;">
                    <mat-list-item mat-list-item [routerLink]="nav.link" routerLinkActive="nav-active"
                        [preserveFragment]="true" style="font-size: 14px;" [queryParams]="preserveURLQueryParams(nav)"
                        *ngFor="let nav of menuEp">
                        {{nav.display| translate}}
                    </mat-list-item>
                </mat-nav-list>
            </mat-expansion-panel>
            <!-- end of shared api -->
            <mat-nav-list style="padding-top: 0px;">
                <mat-list-item mat-list-item [routerLink]="'welcome'" routerLinkActive="nav-active"
                    style="font-size: 14px;">
                    <mat-icon fontSet="material-icons-outlined" style="padding-right:8px">home</mat-icon>{{'WELCOME'|
                    translate}}
                </mat-list-item>
                <mat-list-item mat-list-item (click)="openNewProject()" style="font-size: 14px;">
                    <mat-icon style="padding-right:8px" color="primary">add_box</mat-icon>{{'REGISTER_MY_PROJECT'|
                    translate}}
                </mat-list-item>
            </mat-nav-list>
            <!-- start of tenant nav list -->
            <ng-container *ngIf="projectSvc.viewProject && projectSvc.viewProject.id">
                <mat-nav-list style="padding-top: 0px;">
                    <mat-list-item mat-list-item [routerLink]="'projects/'+projectSvc.viewProject.id+'/insights'"
                        routerLinkActive="nav-active" [preserveFragment]="true" style="font-size: 14px;"
                        *appRequireP="getPermissionId(projectPermissions) | async">
                        <mat-icon fontSet="material-icons-outlined" style="padding-right:8px;">trending_up</mat-icon>
                        {{'MY_PROJECT'| translate}}
                    </mat-list-item>
                    <mat-list-item mat-list-item [routerLink]="'projects/'+projectSvc.viewProject.id+'/clients'"
                        routerLinkActive="nav-active" [preserveFragment]="true" style="font-size: 14px;"
                        *appRequireP="getPermissionId(clientPermissions) | async">
                        <mat-icon fontSet="material-icons-outlined" style="padding-right:8px;">apps</mat-icon>
                        {{'MY_CLIENTS'| translate}}
                    </mat-list-item>
                    <mat-expansion-panel (opened)="openedHandler('ep_nav')" (closed)="closedHander('ep_nav')"
                        [expanded]="navExpand('ep_nav')" *appRequireP="getPermissionId(epPermissions) | async">
                        <mat-expansion-panel-header style="padding-left: 16px;">
                            <mat-panel-title style="align-items: center;">
                                <mat-icon fontSet="material-icons-outlined">api</mat-icon>
                                <div style="margin-left: 8px;">{{'MY_API_NAV'| translate}}</div>
                            </mat-panel-title>
                        </mat-expansion-panel-header>
                        <mat-nav-list style="padding-top: 0px;">
                            <mat-list-item mat-list-item
                                [routerLink]="'projects/'+projectSvc.viewProject.id+'/endpoints'"
                                routerLinkActive="nav-active" [preserveFragment]="true" style="font-size: 14px;">
                                {{'MY_API'| translate}}
                            </mat-list-item>
                            <mat-list-item mat-list-item
                                [routerLink]="'projects/'+projectSvc.viewProject.id+'/cors-configs'"
                                routerLinkActive="nav-active" [preserveFragment]="true" style="font-size: 14px;"
                                *appRequireP="getPermissionId(corsPermissions) | async">
                                {{'MY_CORS'| translate}}
                            </mat-list-item>
                            <mat-list-item mat-list-item
                                [routerLink]="'projects/'+projectSvc.viewProject.id+'/cache-configs'"
                                routerLinkActive="nav-active" [preserveFragment]="true" style="font-size: 14px;"
                                *appRequireP="getPermissionId(cachePermissions) | async">
                                {{'MY_CACHE'| translate}}
                            </mat-list-item>
                        </mat-nav-list>
                    </mat-expansion-panel>
                    <mat-expansion-panel (opened)="openedHandler('p_nav')" (closed)="closedHander('p_nav')"
                        [expanded]="navExpand('p_nav')" *appRequireP="getPermissionId(epPermissions) | async">
                        <mat-expansion-panel-header style="padding-left: 16px;">
                            <mat-panel-title style="align-items: center;">
                                <mat-icon fontSet="material-icons-outlined">policy</mat-icon>
                                <div style="margin-left: 8px;">{{'MY_AUTHORIZATION'| translate}}</div>
                            </mat-panel-title>
                        </mat-expansion-panel-header>
                        <mat-nav-list style="padding-top: 0px;">
                            <mat-list-item mat-list-item
                                [routerLink]="'projects/'+projectSvc.viewProject.id+'/permissions'"
                                routerLinkActive="nav-active" [preserveFragment]="true" style="font-size: 14px;">
                                {{'MY_PERMISSION_MENU'| translate}}
                            </mat-list-item>
                            <mat-list-item mat-list-item [routerLink]="'projects/'+projectSvc.viewProject.id+'/roles'"
                                routerLinkActive="nav-active" [preserveFragment]="true" style="font-size: 14px;"
                                *appRequireP="getPermissionId(corsPermissions) | async">
                                {{'MY_ROLE_DASHBOARD'| translate}}
                            </mat-list-item>
                        </mat-nav-list>
                    </mat-expansion-panel>
                    <mat-list-item mat-list-item [routerLink]="'projects/'+projectSvc.viewProject.id+'/users'"
                        routerLinkActive="nav-active" [preserveFragment]="true" style="font-size: 14px;"
                        *appRequireP="getPermissionId(userPermissions) | async">
                        <mat-icon fontSet="material-icons-outlined" style="padding-right:8px;">people</mat-icon>
                        {{'MY_USER_DASHBOARD'| translate}}
                    </mat-list-item>
                    <mat-list-item mat-list-item [routerLink]="'projects/'+projectSvc.viewProject.id+'/admins'"
                        routerLinkActive="nav-active" [preserveFragment]="true" style="font-size: 14px;"
                        *appRequireP="getPermissionId(adminPermissions) | async">
                        <mat-icon fontSet="material-icons-outlined"
                            style="padding-right:8px;">admin_panel_settings</mat-icon>
                        {{'MY_ADMIN_DASHBOARD'| translate}}
                    </mat-list-item>

                </mat-nav-list>
            </ng-container>
            <!-- end of tenant nav list -->
        </mat-sidenav>

        <mat-sidenav-content [style.padding-left.px]="mobileQuery.matches ? 16 : 30"
            [style.padding-right.px]="mobileQuery.matches ? 16 : 30">
            <router-outlet></router-outlet>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>